<!DOCTYPE html>
<html>
	
	<head>
		<style type="text/css">
			*{
				
				margin: 0px;
				padding: 0px;
			}
			#body{
				width: 100%;
				height: 700px;
				max-width: 500PX;
				margin: 0 auto;
				background-color:#fae738 ;
				overflow: hidden;
			}
			#tips{
				margin-top: 40PX;
				text-align: center;
				color: white;
				font-size: 36PX;
				font-weight: bold;
			}
			#imgs{
				width: 90%;
				margin: 20px auto;
				display: flex;
				justify-content: space-around;
			}
			#jieguo{
				width: 90%;
				margin: 30px auto;
				display: flex;
				justify-content: space-around;
			}
			#jieguo .jieguo div{
				height: 30px;
				width: 89px;
				line-height: center;
				color: white;
			}
			#jieguo  .jieguo  img{
				height: 89px;
				border: solid 1px red;
			}
			
			#jieguo  .pk{
				height: 120px;
				font-size: 48px;
				font-weight: bold;
				
				animation-name:pk ;
				animation-duration: 2s;
				/* 无限重复两大语句*/
				animation-iteration-count: infinite;
				animation-direction: alternate;
			}
			
			#score{
				text-align: center;
				font-size: 24px;
				padding-top: 10px;
				/* 文字循环闪过效果 */
				background-image:-webkit-linear-gradient(left,#3498db 0%,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db 100%);
                color:transparent;
                background-size:200% 100%;
                -webkit-background-clip:text;
                 text-align:center;
                 animation: move 3s infinite linear;
	
			}
			#scoreFen{
				text-align: center;
				font-size: 24px;
				padding-top: 10px;
			}
		@keyframes pk{
				from{transform: scale(1);
				color: #000000;}
				to{transform: scale(2);
				color: red;}
				
		@keyframes move{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-100% 0;
  }
				
			}
		</style>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="body">
			<div id="tips">
				请选择
			</div>
			
			
			<div id="imgs">
				<img src="img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1">
				<img src="img/shitou.png" id="shitou" onclick="shiTou()"class="img1">
				<img src="img/bu.png" id="bu"onclick="bu()"class="img1">
			</div>
			
			
			 <div id="jieguo">
				 <div class="jieguo">
					 <div id="">
					 亲，您选择
					 </div>
				 	<img src="img/jiandao.png" id="myimg">
				 </div>
				 
			 	<div class="pk">PK</div>
				
				<div class="jieguo">
					<div id="">系统选择了	
					</div>
					
					<img src="img/jiandao.png" id="computer" >
				</div>
				
			 </div>
			 
			 <div id="waiting">
			 	<div id="score">
					等待结果中......
				</div>
				<div id="scoreFen">
					<span>00</span>:<span>00</span>
				</div>
			 </div>
			 
		</div>
		<script type="text/javascript">
			var  jiandao = document.getElementById("jiandao");
			var  shitou = document.getElementById("shitou");
			var  bu = document.getElementById("bu");
			var computer = document.getElementById("computer");
			var myImg = document.getElementById("myimg");
			var score = document.getElementById("score");
			var scoreFen = document.getElementById("scoreFen");
			
			var myScore=0,comScore=0;
			
			var imgs=["img/jiandao.png","img/shitou.png","img/bu.png"];
			console.log(imgs[0]);
			
			jiandao.onclick = function(){
				var imgSrc= jiandao.getAttribute("src");
				
				myImg.setAttribute("src",imgSrc);
				checkImg(imgSrc);
			}
			shitou.onclick = function(){
				var imgSrc= shitou.getAttribute("src");
				
				myImg.setAttribute("src",imgSrc);
				checkImg(imgSrc);
			}
			bu.onclick = function(){
				var imgSrc= bu.getAttribute("src");
				
				myImg.setAttribute("src",imgSrc);
				checkImg(imgSrc);
			}
			
			function checkImg(imgSrc){
				var myIndex = imgs.indexOf(imgSrc);
				var intervalId = setInterval(function(){
					var num = parseInt(Math.random()*3);
					computer.setAttribute("src",imgs[num]);
				},20);
				setTimeout(function(){
					clearInterval(intervalId);
					var comSrc = computer.getAttribute("src");
					var comIndex = imgs.indexOf(comSrc);
					if(myIndex==comIndex){
                     score.innerHTML = "平局！再战一轮吧！";
                }else if(myIndex==0&&comIndex==2
                          || myIndex==1&&comIndex==0
                          || myIndex==2&&comIndex==1){
                     score.innerHTML = "赢啦！继续虐他吧！";
                     myScore++;
                 }else{                     score.innerHTML = "输啦！继续努力吧！";
                     comScore++;
                 }

               myScore = (myScore+"").length<2?"0"+myScore:myScore+"";
                 comScore = (comScore+"").length<2?"0"+comScore:comScore+"";
                 
                scoreFen.firstElementChild.innerHTML = myScore;
                 scoreFen.lastElementChild.innerHTML = comScore;
                 
             },400);
         }
		</script>
	</body>
</html>